<template>
	
	<!-- <view class="ruler" :style="{ height: getNavBarHeight() + 'px' }"></view> -->
	
	<my-nav-bar bgType="transparent"></my-nav-bar>
	<!-- <my-nav-bar bgType="pureYellow"></my-nav-bar> -->
	<!-- <my-nav-bar bgType="pureWhite"></my-nav-bar>		 -->
	<!-- <my-nav-bar bgType="pureOrange"></my-nav-bar> -->
	<!-- <my-nav-bar bgType="WhiteFrostedGlass"></my-nav-bar> -->
	
	<view class="WorksPage pageBg" :style="{ top: getNavBarHeight() + 'px', height: PageHeight + 'px' }"> </view>
	
	<!-- <scroll-view class="scrollBox scrollBoxBg colorful" scroll-x :style="{ height: scrollBoxHeight + 'px' }" > -->
	<!-- <scroll-view class="scrollBox scrollBoxBg WhiteFrostedGlass" scroll-x :style="{ height: scrollBoxHeight + 'px' }" > -->
	<!-- <scroll-view class="scrollBox scrollBoxBg YellowFrostedGlass" scroll-x :style="{ height: scrollBoxHeight + 'px' }" > -->
	<scroll-view class="scrollBox scrollBoxBg OrangeFrostedGlass" scroll-x :style="{ height: scrollBoxHeight + 'px' }" >
	<!-- <scroll-view class="scrollBox scrollBoxBg purewhite" scroll-x :style="{ height: scrollBoxHeight + 'px', backgroundColor: 'rgba(255,255,255,1)' }" > -->
	<!-- <scroll-view class="scrollBox scrollBoxBg pureYellow" scroll-x :style="{ height: scrollBoxHeight + 'px' }" > -->
	<!-- <scroll-view class="scrollBox scrollBoxBg pureOrange" scroll-x :style="{ height: scrollBoxHeight + 'px' }" > -->
		<view :class="['DesBox', activeBoxIdx==index?'active':'']" v-for="(item,index) in workTypeList" :key="index" @click="changActive(index)" :style="{ top: getNavBarHeight() + 'px' }">
			
			<view class="TextBox">
				<view class="Text"> {{item.category_name}} </view>
			</view>
			<view class="DesImageBox">
				<image class="DesImage" :src="item.category_ImageUrl" mode="aspectFill" alt="Description image" />
			</view>
	
		</view>
	
	</scroll-view>
	
	<scroll-view class="contentBox" scroll-y :style="{ paddingTop: scrollBoxHeight + 'px' }" >
		<view class="content">
			<work-item v-for="item in displayWorkList" :key="item.id" :WorkObj="item"> </work-item>
		</view>
	</scroll-view>

	<my-nav class="down-nav" :y="Number(2)" :x="XRef"></my-nav>
	
</template>

<script setup>
	import { ref, toRaw, watch, onMounted } from 'vue';
	import { BASE_URL, request } from "@/utils/request.js"
	import { SYSTEM_INFO, getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIcon } from '@/utils/system.js';
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { getCurrentIdx } from "@/utils/page.js";

	// console.log("nav bar height = ", getNavBarHeight());
	// console.log("title bar height = ", getTitleBarHeight());
	// console.log("screen width: ", uni.getWindowInfo().screenWidth);
	
	const PageHeight = ref( uni.getWindowInfo().screenHeight - getNavBarHeight() );
	const scrollBoxHeight = ref( getNavBarHeight() + 110 );
	console.log("scroll box height:", scrollBoxHeight.value);
	
	const activeBoxIdx = ref(0);
	const changActive = (index)=>{
		console.log("type of index: ", typeof(index) );
		activeBoxIdx.value=index;
		reloadDisplayWorkList();
	}
	watch(activeBoxIdx,(newValue, OldValue)=>{
		console.log("newvalue: ", newValue, "oldvalue: ", OldValue);
	})
	
	const workTypeList = ref([]);
	const allWorkList = ref([]);
	const displayWorkList = ref([]);
	
	const getWorkTypeList = async function(){
		await request( {url: 'work_type/all'} )
			.then( res=>{
				// console.log("getWorks(): all work type: res: "); console.log(res);
				workTypeList.value = res.data;
				// console.log("getWorks(): all work_type: ref var: "); console.log(workTypeList.value);
				workTypeList.value.forEach( workType=>{
					// console.log("in foreach: worktype.id: ", workType.id);
					request( { url: `work/cover/${workType.id}` } )
						.then(res2=>{
							// console.log("album cover obj res2: "); console.log(res2);
							let AlbumCoverObjId = res2.data.id; //console.log("cover obj id: ", AlbumCoverObjId);
							workType.category_ImageUrl = BASE_URL + `work/image/${AlbumCoverObjId}`;
						});
				});
				console.log("getWorks(): all work_type: ref var: "); console.log(workTypeList.value);
			})
	}
	
	const getAllWorkList = async function(){
		await request( {url: `work/all`, isShowToast: true} )
			.then( res=>{
				// console.log("getWorks(): work all: res: "); console.log(res);
				allWorkList.value = res.data;
				// allWorkList.value.forEach( work=>{
				// 	work.image_url = BASE_URL + `work/image/${work.id}`;
				// });
				console.log("getWorks(): allWorkList.value ref var: "); console.log(allWorkList.value);
			})
	}
	
	const reloadDisplayWorkList = async function(){
		displayWorkList.value = [];
		// console.log("active box idx: ", activeBoxIdx.value+1);
		allWorkList.value.forEach( work=>{
			// console.log("this work obj: "); console.log(work);
			// console.log("this work obj.type_id: ", work.type_id);
			// console.log("if the two equals? :", Boolean( work.type_id == activeBoxIdx.value+1 ) );
			if ( work.type_id == activeBoxIdx.value+1 ) {
				work.image_url = BASE_URL + `work/image/${work.id}`;
				displayWorkList.value.push(work);
			}
		})
		console.log("reloadDisplayWorkList(): displayWorkList.len = ", displayWorkList.value.length); 
	}
	
	onLoad(()=>{
		getWorkTypeList()
			.then(()=>{ 
				getAllWorkList()
					.then(()=>{
						reloadDisplayWorkList();
					})
			});
	});
	
	const scrollBox = ref(null); //拿到这个组件的实例
	onReady(()=>{ //dom体挂载完毕
		console.log(  "current idx(): ", getCurrentIdx() );
		console.log("scroll box value: ", scrollBox.value);
		console.log("scroll box value raw", toRaw( scrollBox.value ) );
	})
	
	// ---------------------------------------------
	const XRef = ref( Number(2) );

	onLoad((event) => {
		XRef.value = event.LastIdx ? Number(event.LastIdx) : 2;
	});
	
</script>

<style lang="scss" scoped>
	.ruler{
		border: 1px solid red;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1919812;
		width: 100px;
	}
	
	.WorksPage{
		// border: 2px solid black;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		// z-index: 1919811;
	}
	
	// .scrollBoxBg.transparent{
	// 	// background: transparent 0%;
	// 	background: rgba(0,0,0,0);
	// }
	.scrollBoxBg.colorful{
		background:
			linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 100vh),
			linear-gradient(to right, rgba(250, 150, 0, 0.8) 20%, rgba(255, 255, 255, 0.8));
		backdrop-filter: blur(5px);
	}
	.scrollBoxBg.WhiteFrostedGlass{
		background: rgba(255,255,255,0.55);
		backdrop-filter: blur(5.5px);
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
	}
	.scrollBoxBg.YellowFrostedGlass{
		background: rgba(255, 255, 15,0.55);
		backdrop-filter: blur(5.5px);
		box-shadow: 0px -5px 15px 5px rgba(0, 0, 0, 0.55);
	}
	.scrollBoxBg.OrangeFrostedGlass{
		background: rgba(250, 150, 0, 0.5);
		backdrop-filter: blur(5px);
		box-shadow: 0px -5px 15px 5px rgba(0, 0, 0, 0.55);
	}
	.scrollBoxBg.pureWhite{
		background: rgba(255,255,255,1);
		box-shadow: 0px -5px 15px 5px rgba(0, 0, 0, 0.55);
	}
	.scrollBoxBg.pureYellow{
		background: rgba(255, 255, 15,1);
		box-shadow: 0px -5px 15px 5px rgba(0, 0, 0, 0.55);
	}
	.scrollBoxBg.pureOrange{
		background: rgba(250, 150, 0, 1);
		box-shadow: 0px -5px 15px 5px rgba(0, 0, 0, 0.55);
	}


	.scrollBox {
		// border: 1px solid blue;
		
		position: fixed;
		white-space: nowrap; /* 防止子元素换行 */
		overflow-x: scroll;
		// overflow: hidden;
		width: 100%;
		top: 0;
		// height: 100px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
		
		z-index: 114514;
		
		.DesBox.active{
			// border: 2rpx solid red;
			// margin: 20px 10rpx 10px 10rpx;
			transform: translateY(5px); /* 向下平移10px */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加背景阴影 */
			transition: 0.6s;
			
			.TextBox{
				background-color: white;
				transition: 0.6s;
			}
		}
					
		.DesBox {
			border: 1px solid rgba(111,111,111,0.1);
			border-radius: 10%;
			width: 120rpx; height: 80px;
			box-shadow: 2px 4px 6px 8px rgba(0, 0, 0, 0.10); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
			background-color: rgba(0,0,0,0.2);
			  
			margin: 10px 10rpx 10px 10rpx;
			// margin: 0;
			overflow: hidden;
			
			display: inline-block; position: relative;
			transition: 1s;
		
			.DesImageBox {
				// border: 2rpx solid blue;
				width: 90%;
				height: 70%;
				border-radius: 10% 10% 10% 10%;					
				overflow: hidden;
	
				position: absolute;
				left: 50%; /* 子元素左边距设为父元素宽度的50% */
				bottom: 5%;
				transform: translateX(-50%); /* 通过transform将子元素左移自身宽度的50% */
				
				.DesImage {
					opacity: 100%;
				    width: 100%;
				    height: 100%;
				    // object-fit: cover;
				}
			}
			
			.TextBox{
				// border: 1px solid black;
				border-radius: 10rpx 10rpx 0 0;
				width: 100%;
				height: 100%;
				background-color: rgba(111,111,111,0.1);;
				.Text{
					text-align: center;
				}
			}
	
		}
	
	}
	
	.contentBox{
		z-index: 1919819;
		border: 2px solid blue;
		width: 98%; left: 0; right: 0; margin: auto;
		// padding-top: 200rpx;
		padding-bottom: 200rpx;
		.content{
			// border: 2px solid red;
			margin-top: 20rpx;
			padding: 0 20rpx;
			display: grid; //网格布局
			gap: 20rpx;
			grid-template-columns: 1fr 1fr; //fr三分之一 响应式单位
		}
	}
	
	.down-nav{
		// border: 10px solid red;
		position: fixed;
		bottom: 10px;
	}
	
</style>